<template>
  <div class="page-wallet-log">
    <div class="title">
      {{ $t('shopWallet.platfromBalance') }}
    </div>
    <div class="head">
      <div class="head-item">
        <div class="text">
          <span>{{ $t("shopWallet.platfromIncomeBalance") }} </span>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('shopWallet.platfromIncomeBalanceTips')"
            placement="right"
          >
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
        <div class="balance">
          <span>{{ shopWalletInfo.settledAmount }}</span>
          <!-- <el-button size="mini" type="primary" plain @click="caswithdrawalBtn">提现</el-button> -->
        </div>
      </div>
      <div class="head-item">
        <div class="text">
          <span>{{ $t("shop.pendingSettlement") }}</span>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('shop.platfromPendingSettlementTip')"
            placement="right"
          >
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
        <div class="balance">
          <span>{{ shopWalletInfo.unsettledAmount }}</span>
        </div>
      </div>
    </div>
    <div class="table-box">
      <trading :load="load" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import trading from './components/trading.vue'

const Data = reactive({
  time: '',
  activeName: 'first',
  isCaswithdrawal: false,
  payList: [
    {
      name: '银联',
      amount: 0.00,
      percent: 0.00
    },
    {
      name: '微信',
      amount: 0.10,
      percent: 0.10
    },
    {
      name: '支付宝',
      amount: 0.10,
      percent: 0.10
    },
    {
      name: '积分兑换',
      amount: 0.30,
      percent: 0.40
    },
    {
      name: '转账汇款',
      amount: 0.10,
      percent: 0.10
    },
    {
      name: '企业银联',
      amount: 0.10,
      percent: 0.10
    },
    {
      name: '余额',
      amount: 0.10,
      percent: 0.10
    }
  ],
  tableData: [],
  shopWalletInfo: '',

  load: '0'
})

const { shopWalletInfo, load } = toRefs(Data)

const route = useRoute()
onMounted(() => {
  Data.load = route.query.load || '0'
  getShopWallet()
})

// 获取商城余额信息
const getShopWallet = () => {
  http({
    url: http.adornUrl('/shop/shopWallet/getShopWallet'),
    method: 'get'
  }).then(({ data }) => {
    Data.shopWalletInfo = data
  })
}

</script>

<style lang="scss" scoped>
.page-wallet-log {
  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .head {
    background: #f7f8fa;
    height: 110px;
    padding: 20px;
    display: flex;
    // justify-content: space-around;
    margin-bottom: 20px;

    .head-item {
      height: 100%;
      width: 230px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      text-align: center;
      margin-right: 250px;

      .balance {
        font-size: 22px;
      }
    }
  }
}
</style>
